<template>
  <div class="contr">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 数据大屏顶部 -->
      <div class="top">
        <Top />
      </div>

      <div class="citymenu" ref="cityMenu">
        <!-- 默认显示前三个菜单项 -->
        <div
          class="citymenuitem"
          v-for="(map, index) in visibleMenuItems"
          :key="index"
          :class="{ selected: map.type === queryParams.robotType }"
          @click="switchToCity(map.type)"
        >
          {{ map.name }}
        </div>

        <!-- 显示“全部”按钮 -->
        <div
          class="citymenuitem"
          v-if="menuItems.length > 3"
          @click="toggleShowAll"
        >
          {{ showAll ? "折叠" : "全部" }}
        </div>
      </div>
      <el-input
        v-model="queryParams.robotName"
        size="large"
        style="width: 260px; position: absolute; left: 77.5%; top: 15%"
        placeholder="依据ID/机器人名称/地点进行搜索"
        :prefix-icon="Search"
        @input="handleSearch"
      />
      <div class="card">
        <!-- 左箭头 -->
        <div class="arrow left-arrow" @click="prevPage">&#10094;</div>

        <!-- 卡片列表 -->
        <div
          class="cardList"
          v-for="(item, index) in cardListData"
          :key="index"
          @click="opencardDialog(item)"
        >
          <div class="left">
            <img
              style="width: 100px; height: 100px"
              :src="getRobotImage(item.robotType)"
              alt="机器人图标"
            />
          </div>
          <div class="right">
            <div
              style="font-size: 22px; color: #29fcff"
              class="robot-name"
              :title="item.robotName"
            >
              {{ item.robotName }}
            </div>
            <div>电量：{{ item.currentPower }}</div>
            <div>机器人编号：{{ item.robotCode }}</div>
            <div>
              状态：<span
                :style="{
                  color: item.robotStatus === 0 ? '#29fcff' : '#ccc',
                }"
              >
                {{ robotStatusFormatter(item.robotStatus) }}</span
              >
            </div>
            <div class="robot-address" :title="item.address">
              地点：{{ item.address }}
            </div>
          </div>
        </div>

        <!-- 右箭头 -->
        <div class="arrow right-arrow" @click="nextPage">&#10095;</div>

        <!-- 分页指示器 -->
        <div class="pagination-indicator">
          {{ queryParams.pageNo }} / {{ totalPages }}
        </div>
      </div>
    </div>
    <!-- el-dialog 弹框 -->
    <RobotDialog ref="robotDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import { RobotApi } from "@/api/map/robot";
import robot1 from "../../assets/imgs/智能盘点机器人.png";
import robot2 from "../../assets/imgs/智能还书系统.png";
import robot3 from "../../assets/imgs/智能导览机器人.png";
// 引入顶部的子组件
import Top from "./components/top/index.vue";
import RobotDialog from "@/views/screen/RobotDialog.vue";
const robotStatusFormatter = (status) => {
  const STATUSES = [
    { robotStatus: -1, name: "离线" },
    { robotStatus: 0, name: "在线  " },
    { robotStatus: 1, name: "故障" },
  ];

  const matched = STATUSES.find((item) => item.robotStatus === status);
  return matched ? matched.name : "";
};
// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 6,
  robotType: null, // 1: 智能盘点机器人, 2: 智能还书系统, 3: 智能导览机器人
  robotName: "",
});
const getRobotImage = (type: string) => {
  switch (type) {
    case "1":
      return robot1;
    case "2":
      return robot2;

    case "3":
      return robot3;

    default:
      return new URL("../../assets/imgs/默认机器人.png", import.meta.url).href; // 可选
  }
};
// 卡片数据
const cardListData = ref([] as any);
const totalPages = ref(1);

// 获取机器人列表
const fetchRobotList = async () => {
  const res = await RobotApi.getRobotList(queryParams);
  //console.log(res);

  if (res.list) {
    cardListData.value = res.list; // 假设返回的数据结构为 { data: { list: [], total: number } }
    totalPages.value = Math.ceil(res.total / queryParams.pageSize);
    console.log(cardListData.value, "cardListData.value");
  }
};

// 初始化加载数据
onMounted(() => {
  fetchRobotList();
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  // 添加全局点击事件监听
  document.addEventListener("click", handleClickOutside);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
// 处理点击外部区域
const handleClickOutside = (event) => {
  const cityMenu = document.querySelector(".citymenu");
  const isClickInsideMenu = cityMenu.contains(event.target);

  // 如果点击的是导航栏外部区域，则取消选中
  if (!isClickInsideMenu) {
    queryParams.robotType = null;
    fetchRobotList();
  }
};

// 搜索框输入事件
const handleSearch = () => {
  queryParams.pageNo = 1; // 搜索时重置到第一页
  fetchRobotList();
};

// 切换导航栏
const switchToCity = (type) => {
  queryParams.robotType = type;
  queryParams.pageNo = 1; // 切换类型时重置到第一页
  fetchRobotList();
};

// 上一页
const prevPage = () => {
  if (queryParams.pageNo > 1) {
    queryParams.pageNo--;
    fetchRobotList();
  }
};

// 下一页
const nextPage = () => {
  if (queryParams.pageNo < totalPages.value) {
    queryParams.pageNo++;
    fetchRobotList();
  }
};

// 导航栏数据
const menuItems = ref([
  { name: "智能盘点机器人", type: 1 },
  { name: "智能还书系统", type: 2 },
  { name: "智能导览机器人", type: 3 },
]);

const showAll = ref(false); // 控制是否显示全部

// 计算属性：根据 showAll 的值决定显示的菜单项
const visibleMenuItems = computed(() => {
  return showAll.value ? menuItems.value : menuItems.value.slice(0, 3);
});

// 切换显示全部或折叠
const toggleShowAll = () => {
  showAll.value = !showAll.value;
};

// 弹框功能
const robotDialog = ref(); // 获取 RobotDialog 组件的实例
const opencardDialog = (item) => {
  robotDialog.value.openDialog(item); // 调用 RobotDialog 的 openDialog 方法
};

// 大屏适配
let screen = ref();
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

// 监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};
</script>
<style scoped lang="scss">
.contr {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;
  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .top {
      width: 100%;
      height: 40px;
    }
    .citymenu {
      position: absolute;
      left: 5%;
      top: 19.5%;
      width: 210px;
      height: auto; /* 高度自适应 */
      background-color: #0b275d;
      display: flex;
      flex-direction: column;
      gap: 0px;
    }
    .citymenuitem {
      color: white;
      font-size: 18px;
      cursor: pointer;
      width: 210px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transition: 0.3s ease;
    }
    .citymenuitem.selected {
      background-color: #0b4c7d; /* 选中的背景色 */
      color: white; /* 选中的文字颜色 */
    }
    .citymenuitem:hover {
      background-color: #0b4c7d;
    }
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      width: 10px;
      background-color: transparent;
      border-radius: 10px;
    }
    .card {
      height: 800px;
      width: 1400px;
      background-color: rgba(23, 80, 110, 0.1);
      border: 1px solid #0bb6c7;
      box-shadow:
        1px 2px 10px 1px rgba(14, 252, 255, 0.53),
        inset 5px 4px 100px 1px rgba(14, 252, 255, 0.34);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start; /* 改为左对齐 */
      align-content: flex-start; /* 改为上对齐 */
      padding: 24px;

      box-sizing: border-box;
      position: relative; // 添加相对定位
      left: 18%;
      top: 16%;
    }
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      color: #29fcff;
      cursor: pointer;
      user-select: none;
      z-index: 10;
    }

    .left-arrow {
      left: -40px; // 左箭头位置
    }

    .right-arrow {
      right: -40px; // 右箭头位置
    }
    .arrow:active {
      transform: translateY(-50%) scale(0.9); // 点击时缩小
    }
    // .pagination-indicator {
    //   position: absolute;
    //   bottom: 10px;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   display: flex;
    //   gap: 0px;
    //   cursor: pointer;
    //   z-index: 10;
    // }

    .pagination-indicator span {
      font-size: 30px;
      color: #29fcff;
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }

    .pagination-indicator span.active {
      opacity: 1;
    }

    .pagination-indicator span:hover {
      opacity: 1;
    }
    .pagination-indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #29fcff;
    }
    .cardList {
      cursor: pointer;
      height: 250px;
      width: 400px;
      background-color: rgba(23, 80, 110, 0.6);
      border: 1px solid #0bb6c7;
      box-shadow:
        1px 2px 10px 1px rgba(14, 252, 255, 0.53),
        inset 5px 4px 100px 1px rgba(14, 252, 255, 0.34);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 24px;
      margin-top: 48px;
      .left {
        flex: 1;
        // background-color: red;
        text-align: center;
      }
      .right {
        color: #fff;
        flex: 1.3;
        line-height: 36px;
      }
    }
    .robot-name,
    .robot-address {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
